/**
 * 策略成本图表
 */
import React  from 'react'
import style from './index.less'
import { IECharts} from '../../../../../components'

const CostChart=({
	data
	})=>{
		const myData=data.data

		const myProps= {

			option:{
				color:['#ff8f00','#de7aef','#cddc39','#56a7e8','#4fc3d2','#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
				tooltip: {
					trigger: 'item',
					formatter: "{b} : {c} ({d}%)"
				},
				legend: {
					orient: 'vertical',
					right: '5%',
					top: 'center',
					data: myData.map((item, i) => item.name),
					itemWidth:5,
					itemHeight:5
				},
				series: [
					{
						type: 'pie',
						radius: '70%',
						center: [
							'30%', '50%'
						],
						label: {
							normal: {
								show: false
							}
						},
						data: myData,
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			}
	  }

	return (
		<div className={`chart pie ${style.costChart}`}>
			<IECharts {...myProps} resizable={true}/>
		</div>
	)

}

CostChart.propTypes={
	// data
}

export default CostChart
